<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="5" :xl="5" class="mb20">
        <div class="user-wrap">
          <div class="header" :style="{backgroundImage: 'url('+UserBgImg+')'}"></div>
          <el-avatar :size="80" :src="userInfo.avatar"/>
          <div class="info-wrap">
            <p class="align-center u-name">{{ userInfo.userNickname }}</p>
            <p class="align-center u-email">{{ userInfo.userEmail }}</p>
            <el-divider/>
            <p class="items">
              <span class="item">性别：</span>
              <span>{{ userInfo.sex == 1 ? '男' : (userInfo.sex == 1 ? '保密' : '女') }}</span>
            </p>
            <p class="items">
              <span class="item">生日：</span>
              <span>{{ userInfo.birthday }}</span>
            </p>
            <p class="items">
              <span class="item">地址：</span>
              <span>{{ userInfo.address }}</span>
            </p>
            <p class="items">
              <span class="item">登录IP：</span>
              <span>{{ userInfo.lastLoginIp }}</span>
            </p>
            <p class="items">
              <span class="item">登录时间：</span>
              <span>{{ userInfo.lastLoginTime }}</span>
            </p>
            <p class="align-center" style="padding-top: 20px;">
              <el-button size="small" color="#626aef" round>编辑信息</el-button>
              <el-button size="small" color="#626aef" plain round>重置密码</el-button>
            </p>
          </div>
        </div>
        <div class="user-wrap">
          <div class="info-wrap">
            <div class="common-card-title">账号绑定</div>
            <p class="items">
              <span class="item">保密电话：</span>
              <span>无</span>
            </p>
            <p class="items">
              <span class="item">绑定微信：</span>
              <span>无</span>
            </p>
            <p class="items">
              <span class="item">绑定github：</span>
              <span>无</span>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="19" :xl="19" class="mb20">
        <div class="logs-wrap">
          <div class="common-card-title">最近信息<span class="float-right more-link" @click="goMessagePage">查看更多</span></div>
          <div class="list-wrap">
            <el-table :data="messages" style="width: 100%">
              <el-table-column type="selection" width="55" align="center"/>
              <el-table-column label="编号" align="center" prop="infoId"/>
              <el-table-column label="登录名称" align="center" prop="loginName"/>
              <el-table-column label="登录地址" align="center" prop="ipaddr" width="230" :show-overflow-tooltip="true"/>
              <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true"/>
              <el-table-column label="浏览器" align="center" prop="browser"/>
              <el-table-column label="操作系统" align="center" prop="os"/>
              <el-table-column label="操作信息" align="center" prop="msg"/>
              <el-table-column label="登录日期" align="center" prop="loginTime" width="180"/>
              <el-table-column label="登录模块" alian="center" prop="module"></el-table-column>
            </el-table>
          </div>
          <div class="list-pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="messageTotal"
                v-model:current-page="messageQuery.pageNum"
                v-model:page-size="messageQuery.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                @size-change="handleMessageSizeChange"
                @current-change="handleMessageCurrentChange"/>
          </div>
        </div>
        <div class="logs-wrap">
          <div class="common-card-title">最近登录</div>
          <div>
            <div class="list-wrap">
              <el-table :data="logs" style="width: 100%">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="编号" align="center" prop="infoId"/>
                <el-table-column label="登录名称" align="center" prop="loginName"/>
                <el-table-column label="登录地址" align="center" prop="ipaddr" width="230"
                                 :show-overflow-tooltip="true"/>
                <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true"/>
                <el-table-column label="浏览器" align="center" prop="browser"/>
                <el-table-column label="操作系统" align="center" prop="os"/>
                <el-table-column label="操作信息" align="center" prop="msg"/>
                <el-table-column label="登录日期" align="center" prop="loginTime" width="180"/>
                <el-table-column label="登录模块" alian="center" prop="module"/>
              </el-table>
            </div>
            <div class="list-pagination">
              <el-pagination
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="logTotal"
                  v-model:current-page="loginQuery.pageNum"
                  v-model:page-size="loginQuery.pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  @size-change="handleLogSizeChange"
                  @current-change="handleLogCurrentChange"/>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import EditUser from '/src/views/system/user/component/editUser.vue';
import UserBgImg from '/@/assets/user-bg-img.jpg';
import {resetUserPwd, changeUserStatus} from '/src/api/system/user';
import {getLoginLogs} from "/@/api/system/monitor/loginLog";
import router from "/@/router";

export default defineComponent({
  name: 'systemUser',
  components: {EditUser},
  setup() {
    const editUserRef = ref();
    const state = reactive({
      userInfo: {
        id: 0,
        userName: 'admin',
        mobile: '13578342363',
        userNickname: 'Jackie Chen',
        birthday: '-',
        userEmail: 'yxh669@qq.com',
        sex: null,
        avatar: 'https://yxh-1301841944.cos.ap-chongqing.myqcloud.com/gfast/2021-07-19/ccwpeuqz1i2s769hua.jpeg',
        remark: null,
        address: '大发放打发士大夫发按时',
        lastLoginIp: '-',
        lastLoginTime: '2022-10-26 03:01:52'
      },
      messageQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      messages: [],
      messageTotal: 0,
      loginQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      logs: [],
      logTotal: 0,
    });
    // 打开修改用户弹窗
    const onOpenEditUser = (row: any) => {
      editUserRef.value.openDialog(row);
    };
    // 页面加载时
    onMounted(() => {
      getMessageForPage();
      getLoginLogForPage();
    });

    const getMessageForPage = () => {
      getLoginLogs(state.messageQuery).then((res: any) => {
        state.messages = res.data.list;
        state.messageTotal = res.data.total;
        state.messageQuery.pageNum = res.data.pageNum;
        state.messageQuery.pageSize = res.data.pageSize;
      });
    };

    const getLoginLogForPage = () => {
      getLoginLogs(state.loginQuery).then((res: any) => {
        state.logs = res.data.list;
        state.logTotal = res.data.total;
        state.loginQuery.pageNum = res.data.pageNum;
        state.loginQuery.pageSize = res.data.pageSize;
      });
    };
    /** 重置密码按钮操作 */
    const handleResetPwd = (row: any) => {
      ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({value}) => {
        if (!value || value == '') {
          ElMessage.success('密码不能为空');
          return
        }
        resetUserPwd({id: row.id, userPassword: value}).then(() => {
          ElMessage.success("修改成功，新密码是：" + value);
        });
      }).catch(() => {
      });
    };
    // 用户状态修改
    const handleStatusChange = (row: any) => {
      let text = row.userStatus === 1 ? "启用" : "停用";
      ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return changeUserStatus({id: row.id, userStatus: row.userStatus});
      }).then(() => {
        ElMessage.success(text + "成功");
      }).catch(function () {
        row.userStatus = row.userStatus === 0 ? 1 : 0;
      });
    };

    const handleLogSizeChange = (_size: number) => {
      state.loginQuery.pageNum = 1
      state.loginQuery.pageSize = _size
      getLoginLogForPage();
    };
    const handleLogCurrentChange = (_page: number) => {
      state.loginQuery.pageNum = _page
      getLoginLogForPage();
    };

    const handleMessageSizeChange = (_size: number) => {
      state.loginQuery.pageNum = 1
      state.loginQuery.pageSize = _size
      getLoginLogForPage();
    };
    const handleMessageCurrentChange = (_page: number) => {
      state.loginQuery.pageNum = _page
      getLoginLogForPage();
    };
    const goMessagePage = () => {
      router.push('/user/notice/list');
    };
    return {
      editUserRef,
      onOpenEditUser,
      handleResetPwd,
      handleStatusChange,
      UserBgImg,
      handleLogSizeChange,
      handleLogCurrentChange,
      handleMessageSizeChange,
      handleMessageCurrentChange,
      ...toRefs(state),
      goMessagePage,
    };
  },
});
</script>
<style lang="scss" scoped>
.profile-container {
  overflow: hidden;

  .logs-wrap {
    background-color: var(--el-fill-color-blank);
    border: 1px solid var(--el-border-color-light);
    border-radius: 10px;
    min-height: 30vh;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 20px;
  }

  .user-wrap {
    background-color: var(--el-fill-color-blank);
    border: 1px solid var(--el-border-color-light);
    border-radius: 10px;
    position: relative;
    margin-bottom: 20px;

    .header {
      background-position: center;
      background-repeat: no-repeat;
      height: 120px;
      background-size: cover;
      border-radius: 10px 10px 0 0;
    }

    .el-avatar {
      position: absolute;
      top: 80px;
      left: 50%;
      margin-left: -40px;
      border: 3px solid var(--el-border-color-light);
    }

    .info-wrap {
      padding: 40px 20px 20px;
      min-height: 300px;

      p {
        line-height: 30px;
      }

      .u-name {
        font-size: 20px;
        font-weight: bold;
      }

      .u-email {
        font-size: 16px;
        color: #7b7979;
      }

      .items {
        display: flex;
        align-items: center;

        span {
          display: inline-block;
        }

        span:last-child {
          font-weight: bold;
        }
      }
    }
  }
}
</style>
